<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-03-29 09:02:01
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-03-29 13:11:11
 * @FilePath: \mapview\src\components\parkingViolation\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div id="parking-container"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "parking-violation",
  data() {
    return {
        option : {
    legend: {
        textStyle: {
            color: "#ffffff",
        },
        left: "right",
    },
    dataset: {
        dimensions: ["violationType", "已处理", "未处理"],
        source: [
            { violationType: "危化品车", 已处理: 19, 未处理: 1 },
            { violationType: "非危化品车", 已处理: 24, 未处理: 1 },
            { violationType: "跨线停车", 已处理: 71, 未处理: 0 },
            { violationType: "停放超时", 已处理: 9, 未处理: 0 },
            { violationType: "人员久留", 已处理: 7, 未处理: 0 },
        ],
    },
    xAxis: {
        type: "category",
        axisLabel: {
            formatter: function (value) {
                // 对于长文本，插入换行符
                if (value.length > 5) {
                    return value.slice(0, 5) + "\n" + value.slice(5);
                }
                return value;
            },
            textStyle: {
                color: "#ffffff", // 修改 x 轴文字颜色
            },
        },
        
    },
    yAxis: {
        axisLabel:{
            textStyle:{
                color: "#ffffff", // 修改 y 轴文字颜色
            }
        }
    },

    series: [
        {
            type: "bar",
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        
                        offset: 0, color: 'rgba(147,135,136,0.5)' // 起始颜色，使用 RGBA 格式设置透明度
                    }, {
                        offset: 1, color: 'rgba(179,138,110,0.8)' // 结束颜色，使用 RGBA 格式设置透明度
                    }],
                    global: false // 缺省为 false
                },
            },
            label: {
                show: true,
                position: "top",
                formatter: function (params) {
                    return params.value[1];
                },
                color: "#B18A70",
            },
        },
        {
            type: "bar",
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        
                        offset: 0, color: 'rgba(77,231,255,0.5)' // 起始颜色，使用 RGBA 格式设置透明度
                    }, {
                        offset: 1, color: 'rgba(26,143,253.0)' // 结束颜色，使用 RGBA 格式设置透明度
                    }],
                    global: false // 缺省为 false
                },
            },
            label: {
                show: true,
                position: "top",
                formatter: function (params) {
                    return params.value[2];
                },
                color: "#4DE6FE",
            },
        },
    ],
    // 使用tooltip来展示完整的内容
    tooltip: {
        formatter: function (params) {
            return params.data.violationType + ":<br/>" + "已处理：" + params.data.已处理 + "<br/>" + "未处理：" + params.data.未处理;
        }
    }
},
      myChart:null
    };
  },
  components: {},
  created() {},
  mounted() {
    this.initEcharts();
    this.reSize()
  },
  methods: {
    initEcharts() {
      var chartDom = document.getElementById("parking-container");
      this.myChart = echarts.init(chartDom);

      this.option && this.myChart.setOption(this.option);
    },


    reSize(){
        window.addEventListener('resize',()=>{
            console.log('屏幕尺寸变化了');
            this.myChart.resize()
        })
    }
  },
};
</script>

<style scoped>
#parking-container {
  width: 100%;
  height: 100%;
}
</style>
